<template>
    <view class="customerOrder">
        <MyNavbar :navList="navList" :currentIndex="currentIndex" @changeNav="changeNav"></MyNavbar>
        <WaitOrder :waitOrderList="waitOrderList" v-if="currentIndex == 0"></WaitOrder>
        <AcceptOrder :acceptOrderList="acceptOrderList" @changeState="changeState" v-if="currentIndex == 1">
        </AcceptOrder>
    </view>
    <MyTabbar name="发单"></MyTabbar>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app';
import MyTabbar from '@/components/my-tabbar/my-tabbar.vue';
import MyNavbar from '@/components/my-navbar/my-navbar.vue';
import WaitOrder from './components/waitOrder.vue';
import AcceptOrder from './components/acceptOrder.vue';
import { getWaitOrderPage, getAcceptOrderPage, refreshPayOrder } from '@/api/customerPage/order';
import type { PageParams, OrderParams } from "@/types/order"
import { useMemberStore } from '@/stores';
const { isLogin, userInfo } = toRefs(useMemberStore())

onShow(() => {
    uni.hideTabBar()
    // 如果是从其他页面跳转过来(支付成功 和 切换tab) 就刷新一次数据(处理返回时刷新页面的问题)
    const loadData = uni.getStorageSync('loadData')
    if (loadData) {
        initList()
        uni.removeStorageSync('loadData')
    }
})

// 导航
const navList = ref([
    { text: "待接单", index: 0 },
    { text: "已接单", index: 1 }
])
const currentIndex = ref<number>(0)
const changeNav = ((e: number) => {
    if (e == currentIndex.value) return
    currentIndex.value = e
    initList()
})

// 初始化列表及请求参数
const initList = () => {
    if (currentIndex.value === 0) {
        waitOrderList.value = []
        waitOrderParams.pageNo = 1
        getWaitOrderList()
    } else {
        acceptOrderList.value = []
        acceptOrderParams.pageNo = 1
        getAcceptOrderList()
    }
}


// 上拉加载更多
onReachBottom(() => {
    if (currentIndex.value == 0) {
        if (waitOrderList.value.length >= waitOrderTotal.value) {
            uni.showToast({ title: '没有更多数据了', icon: 'none' })
        } else {
            waitOrderParams.pageNo++
            getWaitOrderList()
        }
    }
    if (currentIndex.value == 1) {
        if (acceptOrderList.value.length >= acceptOrderTotal.value) {
            uni.showToast({ title: '没有更多数据了', icon: 'none' })
        } else {
            acceptOrderParams.pageNo++
            getAcceptOrderList()
        }
    }
})

// 下拉刷新
onPullDownRefresh(() => {
    if (!isLogin.value) return
    initList()
})

// 获取待接单订单列表
const waitOrderList = ref<OrderParams[]>([])
const waitOrderTotal = ref<number>(0)

const waitOrderParams = reactive<PageParams>({
    pageNo: 1,
    pageSize: 10,
    customUserId:""
})
const getWaitOrderList = async () => {
    if (!isLogin.value) return
    await refreshPayOrder()
    uni.showLoading({
        title: '加载中...'
    })
    waitOrderParams.customUserId = userInfo.value?.userId
    const res: any = await getWaitOrderPage(waitOrderParams)
    if (res.code == 0 && res.data) {
        waitOrderList.value = waitOrderList.value.concat(res.data.list)
        waitOrderTotal.value = res.data.total
    }
    uni.hideLoading()
    // 停止下拉刷新
    uni.stopPullDownRefresh()
}

// 获得已接单订单列表
const acceptOrderList = ref<OrderParams[]>([])
const acceptOrderTotal = ref<number>(0)
const acceptOrderParams = reactive<PageParams>({
    pageNo: 1,
    pageSize: 10,
    nodeStatus: 1,
    customUserId:""
})
const getAcceptOrderList = async () => {
    if (!isLogin.value) return
    uni.showLoading({
        title: '加载中...'
    })
    acceptOrderParams.customUserId = userInfo.value?.userId
    const res: any = await getAcceptOrderPage(acceptOrderParams)
    if (res.code == 0 && res.data) {
        acceptOrderList.value = acceptOrderList.value.concat(res.data.list)
        acceptOrderTotal.value = res.data.total
    }
    uni.hideLoading()
    // 停止下拉刷新
    uni.stopPullDownRefresh()
}
// 切换状态
const changeState = (state: number) => {
    acceptOrderList.value = []
    acceptOrderParams.nodeStatus = state
    getAcceptOrderList()
}


</script>

<style lang="scss" scoped>
.customerOrder {
    min-height: 100vh;
    overflow: hidden;
    background: #f8f8f8;
}
</style>